<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>$Title$</title>
    <style>
        tr:nth-of-type(odd){
            background-color: darkgray;
        }
    </style>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div style="width: 500px;margin: 0 auto">
    <h1 style="margin-left: 100px">疫苗接种预约系统</h1>
    <button onclick="location.href='toadd'">添加预约</button>
    <table>
        <tr>
            <th>预约人姓名</th>
            <th>预约人身份证号</th>
            <th>接种状态</th>
            <th>预约接种日期</th>
            <th>操作</th>
        </tr>
        <c:forEach items="${list}" var="booking">
            <tr>
                <td>${booking.userName}</td>
                <td>${booking.cardId}</td>
                <td id="${booking.id}">${booking.status==0?"预约":"已接种"}</td>
                <td>${booking.bookingDate}</td>
                <td><a href="javascript:del(${booking.id})">完成接种</a></td>
            </tr>
        </c:forEach>
    </table>
    <span style="margin: 180px;color: red" id="info"></span>
</div>
</body>
<script>
    function del(id){
        if (confirm("确定已完成疫苗接种吗？")){
            $.ajax({
                url:"updateServlet",
                type:"get",
                data:"id="+id,
                async:false,
                dataType:"text",
                success:function(data){
                    if (data=="true"){
                        $("#"+id).html("已接种");
                        $("#info").html("接种成功!")
                    }else{
                        $("#cId").html("")
                    }
                }
            })
        }
    }
</script>
</html>
